<template>

	<!-- 原生模式 -->
	<!-- <view >
		<div class="dv">
			<view>
			<label for="search" class="search-label">
			    <img  src="../../static/icon/搜索.png" alt="Search">
			  </label>
			<input placeholder=" " id="search"  class=" search-input" type="text" v-model="searchQuery" @input="handleInput" @confirm="handleEnterKey"  />
			<span class="placeholder-text">{{placeholderText}}</span>
			</view>
			<view>
				<div class="other-icon">
				    <img src="../../static/icon/function2.png" alt="Other Icon">
				  </div>
			</view>
		</div>
	</view> -->

	<!-- 混合 -->
	<view class="u-page">
		<div class="panding">
			<div class="shouye">
				<!-- 搜索框 -->
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<div class="dv" style="margin-top: 80rpx;">
							<u--input placeholder="搜索车型" prefixIcon="search" class="search-input"
								prefixIconStyle="font-size: 40rpx;color: #909399;"></u--input>
							<view>
								<div class="other-icon">
									<img src="../../static/icon/function2.png" style="height: 40rpx;width: 100%;"
										alt="Other Icon">
								</div>
							</view>
						</div>
					</view>
				</view>

				<!-- 轮播图 -->
				<view class="main">
					<div class="lunbo">
						<u-swiper :list="list5" @change="e => current = e.current" :autoplay="true" :interval="3000"
							:height="swiperHeight">
							<view slot="indicator" class="indicator">
								<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
									:class="[index === current && 'indicator__dot--active']">
								</view>
							</view>
						</u-swiper>
					</div>
				</view>

				<!-- 菜单功能图标 -->
				<view class="tu">
					<u-grid :border="false" col="5">
						<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @tap="goUserCar(listIndex)">
							<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="30"></u-icon>
							<text class="grid-text">{{listItem.title}}</text>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>

			</div>

			<!-- 线条 -->
			<div style="margin-top: 15rpx;">
				<view>
					<hr size=5 style="background-color:gainsboro;border: none;">
				</view>
			</div>

			<div class="shouye">
				<div style="margin-top: 20rpx;">
					<!-- <div class="div1">
                        <view>
                            <image style="width: 100%; height: 250upx;" src="../../static/tu/che.png"></image>
                        </view>
                    </div>
                    <div class="div2">
                        <div>
                            <view>
                                <image style="width: 100%; height: 120upx;" src="../../static/tu/che1.jpg"></image>
                            </view>
                        </div>
                        <div style="margin-top: 5upx;">
                            <view>
                                <image style="width: 100%; height: 120upx;" src="../../static/tu/che2.jpg"></image>
                            </view>
                        </div>

                    </div> -->


					<view class="content">
						<u-row gutter="10">
							<u-col span="6">
								<view class="demo-layout " style="height: 240rpx;">
									<image style="width: 100%; height: 240rpx;" src="../../static/tu/che.png"></image>
								</view>
							</u-col>
							<u-col span="6">
								<view style="height: 240rpx">
									<view class="demo-layout ">
										<image style="width: 100%;height: 120rpx;" src="../../static/tu/che1.jpg">
										</image>
									</view>

									<view class="demo-layout" style="margin-top: 100rpx;">
										<image style="width: 100%;height: 120rpx; " src="../../static/tu/che2.jpg">
										</image>
									</view>
								</view>


							</u-col>

						</u-row>
					</view>

				</div>

			</div>

			<!-- 线条 -->
			<div style="margin-top: 30rpx;">
				<view>
					<hr size=5 style="background-color:gainsboro;border: none;">
				</view>
			</div>


			<div class="shouye">
				<view class="dv">
					<u--text text="热销车型"></u--text>
					<u--text suffixIcon="../../static/tu/jinru.png" iconStyle="font-size: 18rpx" type="info"
						size="10rpx" align="right" text="查看全部"></u--text>
				</view>
			</div>

			<div style="margin-top: 20rpx;">
				<u-line></u-line>
			</div>


			<div class="shouye">
				<div style="margin-top: 20rpx;" @tap="gonavigate">
					<!-- <div class="div1">
                    <view>
                        <image style="width: 100%; height: 250upx;" src="../../static/tu/home_car4.png"></image>
                    </view>
                    </div>
                    <div class="div2">
                        <div style="margin-top: 18upx;">
                            <span>新车A系列 588ku</span>
                        </div>
                        <div style="margin-top: 50upx;">
                            <span>报价¥：280000.00</span>
                        </div>
                    </div> -->

					<view class="content">
						<u-row gutter="10">
							<u-col span="5">
								<view class="demo-layout " style="height: 200rpx;">
									<div style="position: relative;">
										<image style="width: 100%; height: 200rpx;" src="../../static/tu/home_car4.png">
										</image>
										<u-badge :value="'01'" class="hot-sale">热销排行第一</u-badge>
									</div>
								</view>
							</u-col>
							<u-col span="7">
								<view style="height: 200rpx">
									<view class="demo-layout " style="margin-top: 7rpx;">
										<span>新车A系列 588ku</span>
									</view>

									<view class="demo-layout" style="margin-top: 70rpx;">
										<span>报价¥：280000.00</span>
									</view>
								</view>


							</u-col>

						</u-row>
					</view>

				</div>

			</div>

			<!--	加载更多-->
			<div class="shouye">

				<div class="dibu">
					<div>
						<div v-for="(item, index) in list1" :key="index">{{ item }}</div>
						<div v-if="loading" class="loading">加载中...</div>
						<div v-else-if="hasMore" class="load-more" @click="loadMore">点击加载更多</div>
						<div v-else class="no-more">没有更多了</div>
					</div>
				</div>

			</div>
		</div>


	</view>

</template>

<script>
	export default {
		data() {
			return {
				searchQuery: '',
				placeholder: '搜索车型',
				showIcon: true,
				current: 0,
				swiperHeight: 0, //外部的高度
				current: 0,
				width: 0,
				swiperHeight: "290rpx",
				list1: [], // 列表数据
				page: 1, // 页码
				pageSize: 10, // 每页条数
				loading: false, // 是否正在加载
				hasMore: true, // 是否还有更多
				list5: [
					'../../static/icon/banner.jpg',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				list: [{
						name: '../../static/tu/home_picture1.png',
						title: '二手车'
					},
					{
						name: '../../static/tu/home_picture2.png',
						title: '新车'
					},
					{
						name: '../../static/tu/home_picture3.png',
						title: '零首付'
					},
					{
						name: '../../static/tu/home_picture4.png',
						title: '分期申请'
					},
					{
						name: '../../static/tu/home_picture5.png',
						title: '估价'
					},
					{
						name: '../../static/tu/home_picture6.png',
						title: '报价卖车'
					},
					{
						name: '../../static/tu/home_picture7.png',
						title: '热销排行'
					},
					{
						name: '../../static/tu/home_picture9.png',
						title: '降价急售'
					},
					{
						name: '../../static/tu/home_picture8.png',
						title: '汽车百科'
					},
					{
						name: '../../static/tu/home_picture10.png',
						title: '汽车养护'
					},
				],
			}
		},
		computed: {
			placeholderText() {
				return this.searchQuery.trim() === '' ? this.placeholder : ''
			}
		},

		methods: {
			handleInput() {
				this.showIcon = this.searchQuery.trim() !== '' ? false : true;
				this.$emit('input', this.searchQuery.trim())
			},
			handleEnterKey() {
				this.$emit('search');
				console.log("11111")
			},
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			},
			loadMore() {
				if (this.loading || !this.hasMore) {
					return
				}
				this.loading = false
				setTimeout(() => {
					this.hasMore = false
				}, 2000)
				// 请求下一页数据
				// ...
			},
			loadMoressss() {
				if (this.loading || !this.hasMore) {
					return
				}
				this.loading = true
				// 请求下一页数据
				/* uni.request({
				  url: '/api/list',
				  data: {
				    page: this.page,
				    pageSize: this.pageSize,
				  },
				  success: res => {
				    const newList = res.data.list
				    this.list = [...this.list, ...newList]
				    this.page++
				    this.loading = false
				    this.hasMore = newList.length >= this.pageSize
				  },
				  fail: () => {
				    this.loading = false
				  },
				}) */
			},
			gonavigate() {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/maiche/carDetail'
				})
			},
			goUserCar(index){
				if (index == 0) {
					uni.navigateTo({
						//保留当前页面，跳转到应用内的某个页面
						url: '/pages/shouye/usedCar'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6rpx;
			width: 6rpx;
			border-radius: 100rpx;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5rpx;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	::v-deep .u-input {
		border-radius: 22rpx;
	}

	.dibu {
		margin-top: 80rpx;
	}
</style>